<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="../css/luckDraw/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/luckDraw/style2.css">
<style>
.calenwrap{width:100%;height:100%;}
.calenbox{width:100%;border-top:1px solid #fff;border-left:1px solid #fff;background-image:url(../images/luckDraw/calenbg.jpg);background-size:cover;}
.calenbox .date{width:25%;height:70px;line-height:70px;text-align:center;color:#474747;font-size:18px;float:left;border-right:1px solid #fff;border-bottom:1px solid #fff;}
.on{opacity:0;}
.pastColor{background:#ffcdd4;}
.futureColor{background:#fe909d;}
.qiandao{position:absolute;}
</style>
</head>
<body>
<div class="calenwrap clearfix">
	<div class="text-center ptb15 font16"><span><</span>&nbsp;&nbsp;<span id="nowDate"></span>&nbsp;&nbsp;<span>></span></div>
	<img src="images/qiandtip.png" id="qdimgtip">
	<div class="calenbox clearfix" id="calenbox">														
	</div>
	<div class="text-center ptb10"><button class="btn btn-danger" id="btn-qiandao">立即签到</button></div>
</div>
</body>
<script src="../js/luckDraw/jquery-1.10.2.min.js"></script>
<script>
window.onload=function(){
	var myDate = new Date();
	var oYear  = myDate.getFullYear();		//年:为了确保时间准确性，数据需要从后台传递
	var oMonth = myDate.getMonth() + 1;		//月:为了确保时间准确性，数据需要从后台传递
	var oDate  = myDate.getDate();			//日:为了确保时间准确性，数据需要从后台传递
	$("#nowDate").html(oYear+'年'+oMonth+'月'+oDate+'日');	//当前日期:格式2016年10月20日，数据需要从后台传递

	var d = new Date(oYear,oMonth,0);
	var daycount = d.getDate();				//当前月份的天数
	//绘制日历网格
	var str='';
	for(var i=0;i<Math.ceil(daycount/4);i++){
		str+='<div class="clearfix"><div class="date"></div><div class="date"></div><div class="date"></div><div class="date"></div></div>'
	}
	$('#calenbox').html(str);
	for(i=1;i<=daycount;i++){
		$('#calenbox .date').eq(i-1).html(i);
	}
	/*for(var i=1;i<=daycount;i++){
		if(i%4==1){
	        str+='</div><div class="clearfix"><div class="date">'+i+'</div>';
	    }else{
	        str+='<div class="date">'+i+'</div>';
	    }
	}
	$('#calenbox').html(str.substr(6));	*/
	//让今天以前的日期和今天以后的日期改变颜色
	for(var i=0;i<oDate-1;i++){
		$('#calenbox .date').eq(i).addClass('pastColor');
	}
	for(var i=oDate-1;i<$('#calenbox .date').length;i++){
		$('#calenbox .date').eq(i).addClass('futureColor');
	}
	$('#calenbox .date').eq(oDate-1).append('<span class="qiandao">立即签到</span>');	
	$('#calenbox .date').eq(oDate-1).click(function(){
		alert('签到成功');
		$(this).addClass('on');
	});
}
</script>
</html>